<div class="m-20 max-w-screen-md relative">
  <div class="text-center">
    <button class="m-4" id="tip-position-top-left" tiButton [tiTip]="tipStr" tiTipPosition="top-left">top-left</button>
    <button class="m-4" id="tip-position-top" tiButton [tiTip]="tipStr" tiTipPosition="top">top</button>
    <button class="m-4" id="tip-position-top-right" tiButton [tiTip]="tipStr" tiTipPosition="top-right">top-right</button>
  </div>
  <div class="w-40 float-left">
    <button class="m-4" id="tip-position-left-top" tiButton [tiTip]="tipStr" tiTipPosition="left-top">left-top</button>
    <button class="m-4" id="tip-position-left" tiButton [tiTip]="tipStr" tiTipPosition="left">left</button>
    <button class="m-4" id="tip-position-left-bottom" tiButton [tiTip]="tipStr" tiTipPosition="left-bottom">left-bottom</button>
  </div>
  <button tiButton [tiTip]="tipStr" tiTipPosition="center" class="center">center</button>
  <div class="w-40 float-right">
    <button class="m-4" id="tip-position-right-top" tiButton [tiTip]="tipStr" tiTipPosition="right-top">right-top</button>
    <button class="m-4" id="tip-position-right" tiButton [tiTip]="tipStr" tiTipPosition="right">right</button>
    <button class="m-4" id="tip-position-right-bottom" tiButton [tiTip]="tipStr" tiTipPosition="right-bottom">right-bottom</button>
  </div>
  <div class="text-center clear-both">
    <button class="m-4" id="tip-position-bottom-left" tiButton [tiTip]="tipStr" tiTipPosition="bottom-left">bottom-left</button>
    <button class="m-4" id="tip-position-bottom" tiButton [tiTip]="tipStr" tiTipPosition="bottom">bottom</button>
    <button class="m-4" id="tip-position-bottom-right" tiButton [tiTip]="tipStr" tiTipPosition="bottom-right">bottom-right</button>
  </div>
</div>
